var dragSrcElDesktop = null;

function handleDragStartDesktop(e) {
  // Target (this) element is the source node.
  //this.style.opacity = '0.4';

  dragSrcElDesktop = this;

  e.dataTransfer.effectAllowed = 'move';
  e.dataTransfer.setData('text/html', this.innerHTML);
}

function handleDragOverDesktop(e) {
  if (e.preventDefault) {
    e.preventDefault(); // cái này là phải có, để cho phép thả, ngăn chặn những hành động ngoài mong muốn của trình duyệt
  }
  e.dataTransfer.dropEffect = 'move';  // See the section on the DataTransfer object.
  return false;
}

function handleDragEnterDesktop(e) {

  // this / e.target is the current hover target.
  //this.classList.add('over'); // bổ sung thêm lớp over vào thuộc tính Class khi chuột nằm trên đối tượng.
}

function handleDragLeaveDesktop(e) {
    //Xoá bỏ lớp over khỏi thuộc tính Class khi chuột rời khỏi đối tượng
  //this.classList.remove('over');  // this / e.target is previous target element.
  
}
function handleDropDesktop(e) {
  // this/e.target is current target element.
  if (e.stopPropagation) {
    e.stopPropagation(); // Stops some browsers from redirecting.
  }
    e = e ? e : window.event;
    var m = {
        'x' : e.clientX,
        'y' : e.clientY
    }
    var s = getScrollPosition();
   alert('Drop on Desktop?');
   
  // Don't do anything if dropping the same column we're dragging.
  if (dragSrcElDesktop != this) {
    this.style.left = m.x + s.x + 'px';
    this.style.top = m.y + s.y + 'px';
    this.style.display = 'block';
    // Set the source column's HTML to the HTML of the columnwe dropped on.
    //dragSrcElDesktop.innerHTML = this.innerHTML;
    //this.innerHTML = e.dataTransfer.getData('text/html');
  }
  //dragSrcElDesktop.style.opacity = '1'; // thiết lập lại độ trong suốt
  return false;
}

function getScrollPosition() {
 
    var x = 0;
    var y = 0;

    if( typeof( window.pageYOffset ) == 'number' ) {
        x = window.pageXOffset;
        y = window.pageYOffset;
    } else if( document.documentElement && ( document.documentElement.scrollLeft || document.documentElement.scrollTop ) ) {
        x = document.documentElement.scrollLeft;
        y = document.documentElement.scrollTop;
    } else if( document.body && ( document.body.scrollLeft || document.body.scrollTop ) ) {
        x = document.body.scrollLeft;
        y = document.body.scrollTop;
    }

    var position = {
        'x' : x,
        'y' : y
    }

    return position;
 
}

function handleDragEndDesktop(e) {
   alert('end !');
  // this/e.target is the source node.

  // [].forEach.call(cols, function (col) {
    // col.classList.remove('over');
  // });
}
